<template>
    <div class="detail2-container">
        <div id="pdfDom" style="padding: 20px 40px;">
            <p class="detail2-title"><span></span><span>眼底图像检测报告</span><span>{{currentTime}}</span></p>
            <div class="detail2-info1">
                <p class="title"><span>基&nbsp;本&nbsp;信&nbsp;息</span></p>
                <div class="info">
                    <p>
                        <span>病&nbsp;历&nbsp;号：<em>{{result.medical_num}}</em></span>
                        <span>姓&nbsp;名：<em>{{result.name}}</em></span>
                    </p>
                    <p>
                        <span>性&nbsp;别：<em>{{result.gender}}</em></span>
                        <span>年&nbsp;龄：<em>{{result.age}}</em></span>
                    </p>
                    <p>
                        <span>身&nbsp;份&nbsp;证&nbsp;号：<em>{{result.identify_num}}</em></span>
                        <span>手&nbsp;机&nbsp;号：<em>{{result.phone}}</em></span>
                    </p>
                    <p>
                        <span>籍&nbsp;贯：<em>{{result.birth_place}}</em></span>
                        <span>家&nbsp;族&nbsp;病&nbsp;史：<em>{{result.medical_history}}</em></span>
                    </p>
                </div>
                <p class="title" style="margin-top: 20px"><span>筛&nbsp;查&nbsp;内&nbsp;容</span></p>
                <div class="image">
                    <div class="left"><img :src="result.url" alt=""></div>
                    <div class="screening-content right">
                        <p class="table-one"><span>微动脉瘤</span></p>
                        <p class="table-one">
                            <span>数量</span><span>4</span><span>象限</span><span>1、2</span>
                        </p>
                        <p class="table-one"><span>视网膜内出血</span></p>
                        <p class="table-one">
                            <span>数量</span><span>2</span><span>象限</span><span>3</span>
                        </p>
                        <p class="table-one"><span>静脉串珠样改变</span></p>
                        <p class="table-one">
                            <span>数量</span><span>0</span><span>象限</span><span></span>
                        </p>
                        <p class="table-one"><span>显著的视网膜微血管异常</span></p>
                        <p class="table-one" style="border-bottom: 1px solid rgb(0, 0, 0); height: 41px;">
                            <span>数量</span><span>0</span><span>象限</span><span></span>
                        </p>
                    </div>
                </div>
                <!--<p class="title"><span>眼&nbsp;底&nbsp;特&nbsp;征</span></p>-->
                <!--<div class="screening-content">-->
                    <!--<p class="table-one"><span>微动脉瘤</span><span>视网膜内出血</span></p>-->
                    <!--<p class="table-one">-->
                        <!--<span>数量</span><span>4</span><span>象限</span><span>1、2</span><span>数量</span><span>2</span><span>象限</span><span>3</span>-->
                    <!--</p>-->
                    <!--<p class="table-one"><span>静脉串珠样改变</span><span>显著的视网膜微血管异常</span></p>-->
                    <!--<p class="table-one" style="border-bottom: 1px solid rgb(0, 0, 0); height: 41px;">-->
                        <!--<span>数量</span><span>0</span><span>象限</span><span></span><span>数量</span><span>0</span><span>象限</span><span></span>-->
                    <!--</p></div>-->
                <div class="screening-content"><p class="table-one"><span
                        style="flex: 3 1 0%;">视网膜增厚及硬性渗出与黄斑中心凹的关系</span><span>远离</span>
                </p>
                    <p class="table-one"><span>视网膜前出血</span><span>是</span><span>玻璃体积血</span><span>是</span></p>
                    <p class="table-one" style="border-bottom: 1px solid rgb(0, 0, 0); height: 41px;">
                        <span>新生血管形成</span><span>是</span><span></span><span></span></p></div>
                <div class="screening-content" style="margin-top: 30px;"><p class="table-one">
                    <span>垂直C/D及双眼差值</span><span>0.1002</span><span>水平C/D及双眼差值</span><span>0.234</span>
                </p>
                    <p class="table-one"><span>盘周是否有出血</span><span>是</span><span>盘周是否有萎缩</span><span>否</span></p>
                    <p class="table-one"><span style="flex: 3 1 0%;">上方、下方、鼻侧、颞侧盘沿宽窄</span><span>1，2，3，4</span></p>
                    <p class="table-one" style="border-bottom: 1px solid rgb(0, 0, 0); height: 41px;"><span
                            style="flex: 3 1 0%;">神经纤维层是否有缺损</span><span>是</span>
                    </p></div>
                <p class="title"><span>智&nbsp;能&nbsp;检&nbsp;测&nbsp;结&nbsp;果</span></p>
                <div class="result"><p class="result-item-title"><span>序号</span><span>检测项</span><span>检测结果</span></p>
                    <p><span>1</span><span>糖尿病视网膜病</span><span>无症状</span></p>
                    <p><span>2</span><span>青光眼</span><span>90%患有青光眼</span></p></div>
                <p class="title"><span>专&nbsp;家&nbsp;诊&nbsp;断</span></p>
                <div class="diagnostic-opinion"><textarea name="" id="" cols="30" rows="7"
                                                          v-model="result.diagnostic_opinion"></textarea>
                    <div class="submit">
                        <button @click="submitDiagnosticOpinion">提交报告</button>
                    </div>
                </div>
                <!--<p class="title"><span>机&nbsp;器&nbsp;印&nbsp;象</span></p>-->
                <!--<div class="result">-->
                <!--<p><span>序号</span><span>检测项</span><span>病变程度</span><span>健康预警</span></p>-->
                <!--<p><span>1</span><span>糖尿病视网膜病</span><span>无症状</span><span>无风险</span></p>-->
                <!--</div>-->
                <!--<p class="title"><span>专&nbsp;家&nbsp;诊&nbsp;断</span></p>-->
                <!--<div class="diagnostic-opinion">-->
                <!--<textarea name="" id="" cols="30" rows="10"></textarea>-->
                <!--<div class="submit">-->
                <!--<button>提交报告</button>-->
                <!--</div>-->
                <!--</div>-->
            </div>
            <div class="detail-info2">
                <p class="title"><span>眼&nbsp;底&nbsp;图&nbsp;检&nbsp;测&nbsp;报&nbsp;告</span></p>
                <!--<div class="detail">-->
                <!--<p class="plate">杯盘检测</p>-->
                <!--<p class="item"><span><em>上颧间距</em><em>88.323</em></span><span><em>下颧间距</em><em>97.529</em></span></p>-->
                <!--<p class="item"><span><em>鼻间距</em><em>63.325</em></span><span><em>颧间距</em><em>61.131</em></span></p>-->
                <!--</div>-->
                <div class="screening-image">
        <span>
          <img :src="result.vessel" alt="">
          <em>血管分割</em>
        </span>
                    <span>
          <img :src="result.mass_vessel" alt="">
          <em>微动脉瘤标注</em>
        </span>
                    <!--<span>-->
                    <!--<img :src="result.odlocation" alt="">-->
                    <!--<em>视盘视杯定位</em>-->
                    <!--</span>-->
                </div>
            </div>
            <div class="print">
                <button @click="print">打印</button>
                <button @click="getPdf()">导出PDF</button>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    import {BackURL} from "../js/config";
    import event from '../components/event';

    export default {
        name: "detail2",
        data() {
            return {
                result: {},
                currentTime: '',
                htmlTitle: ''
            }
        },
        methods: {
            print() {
                window.print();
            },
            submitDiagnosticOpinion() {
                axios.post(BackURL + 'addOpinion', {
                    medical_num: this.result.medical_num,
                    diagnostic_opinion: this.result.diagnostic_opinion
                }).then((res) => {
                    console.log('addOpinion res', res);
                }).catch((err) => {
                    console.log('addOpinion err', err);
                })
            }
        },
        // created() {
        //     window.addEventListener('message', function (e) {
        //       console.log('event.origin', e.origin)
        //       console.log('postmessage', e.data)
        //       alert(event.data)
        //     }, false)
        // },
        mounted() {
            console.log('this.$route', this.$route)
            this.currentTime = new Date().toLocaleDateString();
            axios.get(BackURL + 'detail', {params: {id: this.$route.params.id}}).then((res) => {
                console.log(res.data.data)
                this.result = res.data.data;
                this.htmlTitle = this.result.name;
                // console.log('this.htmlTitle', this.htmlTitle)
                // this.$Loading.finish();
                // console.log('this.result', this.result);
            }).catch((err) => {
                console.log(err)
                // alert(err)
                alert(err)
            })
        }
    }
</script>

<style scoped lang="scss">
    @media print {
        .print {
            display: none;
        }
        .submit {
            display: none;
        }
    }

    .detail2-container {
        /*margin: 20px 15%;*/
        .detail2-title {
            display: flex;
            justify-content: space-between;
            text-align: center;
            span {
                &:nth-child(2) {
                    height: 40px;
                    line-height: 40px;
                    display: inline-block;
                    font-size: 20px;
                    background-color: rgb(175, 1, 10);
                    color: rgb(255, 255, 255);
                    padding: 0 20px;
                    font-weight: bold;
                    box-shadow: 5px 5px 5px rgba(10, 2, 4, 0.3);
                }
                &:last-child {
                    font-size: 18px;
                    height: 30px;
                    margin-top: 20px;
                }
            }
        }
        .detail2-info1 {
            .title {
                border-bottom: 1px dashed rgb(11, 10, 10);
                span {
                    font-size: 20px;
                    color: rgb(223, 61, 85);
                    border-bottom: 3px solid rgb(157, 0, 11);
                    padding-bottom: 3px;
                    font-weight: bold;
                }
            }
            .info {
                p {
                    font-size: 18px;
                    margin: 10px 0;
                    span {
                        display: inline-block;
                        width: 49%;
                        em {
                            font-style: normal;
                        }
                    }
                }
            }
            .image {
                text-align: center;
                margin: 10px 0;
                display: flex;
                .left {
                    flex: 2;
                    display: flex;
                    align-items: center;
                    img {
                        /*width: 100%;*/
                        height: 321px;
                        padding: 5px;
                        border: 1px solid #000000;
                    }
                }
                .right {
                    flex: 3;
                    height: 321px;
                }
                /*img {*/
                /*height: 375px;*/
                /*}*/
            }
            .screening-content {
                /*margin-top: 10px;*/
                margin-left: 5px;
                border-left: 1px solid #000000;
                .table-one {
                    font-size: 18px;
                    display: flex;
                    justify-content: space-around;
                    color: #000;
                    height: 40px;
                    line-height: 40px;
                    border-top: 1px solid #000000;
                    span {
                        display: inline-block;
                        flex: 1;
                        text-align: center;
                        position: relative;
                        border-right: 1px solid #000000;
                    }
                }
            }
            .result {
                margin: 10px 0;
                .result-item-title {
                    background-color: rgb(157, 0, 11);
                    color: rgb(255, 255, 255);
                }
                p {
                    font-size: 18px;
                    display: flex;
                    justify-content: space-around;
                    background-color: rgb(154, 154, 154);
                    color: rgb(4, 4, 4);
                    height: 40px;
                    line-height: 40px;
                    border-bottom: 1px solid #000000;
                    &:first-child {
                        border-bottom: 1px solid rgb(157, 0, 11);
                    }
                    &:last-child {
                        border-bottom: none;
                    }
                    span {
                        flex: 2;
                        text-align: center;
                        &:first-child {
                            flex: 1;
                        }
                    }
                }
            }
            .diagnostic-opinion {
                margin: 20px 0;
                textarea {
                    width: 100%;
                    padding: 5px;
                    font-size: 18px;
                }
                .submit {
                    text-align: center;
                    button {
                        font-size: 18px;
                        height: 40px;
                        background-color: rgb(157, 0, 11);
                        color: rgb(255, 255, 255);
                        padding: 0 20px;
                        box-shadow: 5px 5px 5px rgba(10, 2, 4, 0.3);
                    }
                }
            }
        }
        .detail-info2 {
            @extend .detail2-info1;
            .detail {
                margin: 10px 0;
                .plate {
                    height: 40px;
                    line-height: 40px;
                    font-size: 18px;
                    background-color: rgb(175, 1, 10);
                    color: rgb(255, 255, 255);
                    padding: 0 20px;
                }
                .item {
                    line-height: 40px;
                    font-size: 16px;
                    border-bottom: 1px solid rgb(255, 255, 255);
                    span {
                        display: inline-block;
                        width: 50%;
                        background-color: rgb(154, 154, 154);
                        padding: 0 20px;
                        /*display: flex;*/
                        /*justify-content: space-between;*/
                        em {
                            font-style: normal;
                            display: inline-block;
                            width: 50%;
                            &:last-child {
                                text-align: right;
                            }
                        }
                        &:first-child {
                            border-right: 1px solid rgb(255, 255, 255);
                        }
                    }
                }
            }
            .screening-image {
                display: flex;
                justify-content: space-around;
                margin-top: 20px;
                span {
                    width: 33%;
                    display: inline-block;
                    text-align: center;
                    font-size: 16px;
                    img {
                        width: 100%;
                    }
                    em {
                        font-style: normal;
                    }
                }
            }
        }
        .print {
            margin-top: 20px;
            text-align: center;
            button {
                height: 30px;
                line-height: 30px;
                background-color: rgb(175, 1, 10);
                color: rgb(255, 255, 255);
                padding: 0 20px;
                font-size: 16px;
                box-shadow: 5px 5px 5px rgba(10, 2, 4, 0.3);
                &:first-child {
                    margin-right: 100px;
                }
            }
        }
    }
</style>
